<template>
    <view class="bac-col-fa min-h-100 bottom-index">
        <!-- 加载中蒙版 -->
        <qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
        <!-- #ifdef MP-WEIXIN -->
        <!-- 顶部导航 -->
        <qmy-custom-navbar :top="42" :title="'活动管理'"></qmy-custom-navbar>
        <!-- #endif -->
        <view :style="{ paddingTop: menuObject.top + menuObject.height + 'px' }">
            <v-tabs :fixed="true" :pills="true" bgColor="#ffffff00" pillsColor="#ffffff00" fontSize="30rpx"
                activeFontSize="32rpx" lineHeight="40rpx" activeColor="linear-gradient(to right, #1e1e1e, #1e1e1e)"
                color="linear-gradient(to right, #616161, #616161)" bold lineColor="#14cc60" v-model="current"
                paddingItem="0 20rpx 0 20rpx" :tabs="tabs"></v-tabs>
        </view>
        <!-- 悬浮球 -->
        <!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" /> -->
        <!-- 发布弹窗 -->
        <uni-popup ref="publishpopup" type="bottom" background-color="#ffffff" border-radius="20rpx 20rpx 0 0">
            <view class="publish-rectangle">
                <view class="mt-40 padding-50">
                    <view class="flex-dir-row ali-item-cen flex-x-bet">
                        <view class="box-1" @tap="$NavigateTo('/pages/publish/article')">
                            <image src="https://mp-1a195ae8-6052-4d67-9e67-d73bf0b3c084.cdn.bspapp.com/fzx.png"
                                class="image-1">
                            </image>
                            <view class="flex-x-bet flex-dir-col full-height">
                                <view class="fs-40 fw-600">发圈子</view>
                                <view class="fs-28 col-54">分享美好瞬间</view>
                            </view>
                        </view>
                        <view class="box-2" @tap="navToPublish('/pages/publish/notice')">
                            <image src="https://mp-1a195ae8-6052-4d67-9e67-d73bf0b3c084.cdn.bspapp.com/ftz.png"
                                class="image-2">
                            </image>
                            <view class="flex-x-bet flex-dir-col full-height">
                                <view class="fs-40 fw-600">发通知</view>
                                <view class="fs-28 col-54 mt-10">通知成员活动事项</view>
                            </view>
                        </view>
                    </view>
                    <view class="box-3" @click="navToPublish('/pages/publish/activity')">
                        <image src="https://mp-1a195ae8-6052-4d67-9e67-d73bf0b3c084.cdn.bspapp.com/fhd.png" class="image-3">
                        </image>
                        <view class="flex-x-bet flex-dir-col full-height">
                            <view class="fs-40 fw-600">发活动</view>
                            <view class="fs-28 col-54 mt-10">开始组织你的活动</view>
                        </view>
                    </view>
                </view>
            </view>
        </uni-popup>
        <view class="ping-20">
            <!-- 如果活动列表为空 -->
            <view v-if="activityData.length || filteredActivityData.length">
                <view class="bac-col-f br-20 ping-20 pos-rela" :class="item != 3 ? 'mb-20' : ''"
                    v-for="(item, index) in filteredActivityData" :key="index">
                    <view v-if="item.settlement_status" class="iconfont ic-yijiesuan pos-abso col-00ba31"
                        style="right: 20rpx;top: 20rpx; font-size: 120rpx;z-index: 2;opacity: 0.5;"></view>
                    <view class="flex-dir-row ali-item-cen" @click="$NavigateTo(`/pages/detail/detail?id=${item._id}`)">
                        <view class="img-190 pos-rela">
                            <image class="br-20 img-190" :src="item.imgs[0].src" mode="aspectFill">
                            </image>
                            <view class="pos-abso brtl-20 brbr-20  fs-22  ping-6-10" style="top: 0;left: 0;z-index: 2;"
                                :class="item.signup_start_time > Date.now() ? 'bac-col-fa col-0a2e365e' : item.signup_start_time < Date.now() && item.signup_end_time > Date.now() ? 'bac-col-00b col-f' : item.start_time < Date.now() && item.end_time > Date.now() ? 'bac-col-ffd col-f' : item.start_time > Date.now() ? 'bac-col-4e col-f' : 'bac-col-fa col-0a2e365e'">

                                {{ item.signup_start_time > Date.now() ? '未开启' : item.signup_start_time < Date.now() &&
                                    item.signup_end_time > Date.now() ? '报名中' : item.start_time < Date.now() &&
                                        item.end_time > Date.now() ? '进行中' : item.start_time > Date.now() ? '待进行' : '已结束' }}
                            </view>
                        </view>
                        <view class="fs-24 flex-dir-col flex-x-bet ml-20" style="height: 180rpx;">
                            <view class="fs-34 fw-600 text-element-1">{{ item.name }}</view>
                            <view class="flex-dir-row ali-item-cen overflow-h mt-10">
                                <view v-for="tag in item.tags" :key="tag" class="text-tips bac-col-00b">
                                    {{ tag }}
                                </view>
                            </view>
                            <view class="flex-dir-row ali-item-cen col-b1">
                                <view class="iconfont ic-shijianxuanzeqi mr-10"></view>
                                <view v-if="item.signup_start_time < Date.now() && item.signup_end_time > Date.now()">
                                    {{ $formatDate(item.signup_start_time) }} -
                                    {{ $formatDate(item.signup_end_time) }}
                                </view>
                                <view v-else>{{ $formatDate(item.start_time) }} -
                                    {{ $formatDate(item.end_time) }}
                                </view>
                            </view>
                            <view class="flex-dir-row ali-item-cen col-b1">
                                <view class="iconfont ic-weizhi mr-10"></view>
                                <view class="text-element-1">{{ item.location }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="flex-dir-row flex-x-bet ali-item-cen pt-20 mt-20 bor-top-f3">
                        <view class="flex-dir-row ali-item-cen  col-b1">
                            <view class="flex-dir-row ali-item-cen">
                                <image v-for="(usimg, its) in item.user_info.slice(0, 4)" :key="its"
                                    :src="usimg.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
                                    :style="{ marginLeft: its == 0 ? 0 : '-20rpx' }" mode="aspectFill"
                                    class="img-50 br-200">
                                </image>
                            </view>
                            <view class="ml-10 fs-24">
                                {{ item.user_info.length ? item.user_info.length + '人已报名' : '' }}
                            </view>
                        </view>
                        <view class="flex-dir-row flex-r-end">
                            <view v-if="item.signup_start_time > Date.now()" @click="editActivity(item._id)"
                                class="btn-bg mr-20 bac-col-f text-ali-c br-200 fs-26 border-f0">编辑</view>
                            <view v-if="item.signup_start_time < Date.now()" @click="getEnterMember(item._id)"
                                class="btn-bg mr-20 bac-col-f text-ali-c br-200 fs-26 border-f0">查看成员</view>
                            <view @click="scanCheck(item._id)" class="fs-26 br-200 text-ali-c fw-600 btn-bg">
                                <view class="gradient-text">扫码核验</view>
                            </view>
                        </view>
                    </view>
                </view>
                <qmy-logo></qmy-logo>
            </view>
            <view v-else class="activity-empty-box">
                <image class="activity-empty-image"
                    src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/activity-mepty.png"
                    mode="scaleToFill" />
                <view class="fs-28 fw-600">暂无活动</view>
            </view>
        </view>
        <!-- 入场信息弹窗 -->
        <uni-popup ref="entrancePopup" type="bottom" background-color="#ffffff" border-radius="20rpx 20rpx 0 0">
            <view class="slanted-rectangle">
                <view class="fs-30 fw-600 bor-bottom-f3 ping-30 pt-0">
                    <v-tabs :fixed="true" :pills="true" bgColor="#ffffff00" pillsColor="#ffffff00" fontSize="28rpx"
                        activeFontSize="30rpx" lineHeight="40rpx" activeColor="linear-gradient(to right, #1e1e1e, #1e1e1e)"
                        color="linear-gradient(to right, #616161, #616161)" bold lineColor="#14cc60" v-model="currentTab"
                        paddingItem="0 20rpx 0 20rpx" :tabs="['已报名', '已入场']"></v-tabs>
                </view>
                <scroll-view class="h-40-vh ping-30" scroll-y>
                    <view v-if="currentTab === 0">
                        <view v-for="(item, index) in signupUserList" :key="index" :class="index == 0 ? 'pt-0' : ''"
                            class="flex-dir-row ali-item-cen flex-x-bet ping-20-0 bor-bottom-f3">
                            <view class="flex-dir-row ali-item-cen"
                                @click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.user_info[0].user_id}`)">
                                <qmy-gender-border iconBottom="4rpx" iconWidth="30rpx" iconHeight="30rpx" iconSize="24rpx"
                                    iconLineHeight="30rpx" :gender="item.user_info[0].user_gender"
                                    :avatar="item.user_info[0].user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
                                    :avatarWidth="100 + 'rpx'" :avatarHeight="100 + 'rpx'"></qmy-gender-border>
                                <view class="flex-dir-col flex-x-bet ml-20" style="height: 90rpx;">
                                    <view class="fs-32">{{ item.user_info[0].user_name || '匿名用户' }}</view>
                                    <view class="fs-28 col-87">联系方式：{{ item.user_info[0].user_mobile ?
                                        item.user_info[0].user_mobile : '无' }}</view>
                                </view>
                            </view>
                            <view class="contact-btn" @click="callUser(item.user_info[0].user_mobile)">
                                <text class="iconfont ic-dianhua mr-6"></text>
                                <text>联系他</text>
                            </view>
                        </view>
                    </view>
                    <view v-else>
                        <view v-for="(item, index) in entranceUserList" :key="index" :class="index == 0 ? 'pt-0' : ''"
                            class="flex-dir-row ali-item-cen flex-x-bet ping-20-0 bor-bottom-f3">
                            <view class="flex-dir-row ali-item-cen"
                                @click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.user_info[0].user_id}`)">
                                <qmy-gender-border iconBottom="4rpx" iconWidth="30rpx" iconHeight="30rpx" iconSize="24rpx"
                                    iconLineHeight="30rpx" :gender="item.user_info[0].user_gender"
                                    :avatar="item.user_info[0].user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
                                    :avatarWidth="100 + 'rpx'" :avatarHeight="100 + 'rpx'"></qmy-gender-border>
                                <view class="flex-dir-col flex-x-bet ml-20" style="height: 90rpx;">
                                    <view class="fs-32">{{ item.user_info[0].user_name || '匿名用户' }}</view>
                                    <view class="fs-28 col-87">联系方式：{{ item.user_info[0].user_mobile ?
                                        item.user_info[0].user_mobile : '无' }}</view>
                                </view>
                            </view>
                            <view class="contact-btn" @click="callUser(item.user_info[0].user_mobile)">
                                <text class="iconfont ic-dianhua mr-6"></text>
                                <text>联系他</text>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
        <!-- 底部定位发布按钮 -->
        <view class="w-100 fixed-bottom bac-col-00b" @click="btnClick">
            <view class="w-100 bg-col-00b text-ali-c">
                <view class="fs-30 col-f fw-600">我要发布</view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    store,
    mutations
} from '@/utils/store.js'
export default {
    data() {
        return {
            // #ifdef MP-WEIXIN
            menuObject: uni.getMenuButtonBoundingClientRect(),
            // #endif
            // #ifndef MP-WEIXIN
            menuObject: 0,
            // #endif
            tabs: ['全部', '进行中', '报名中', '审核中', '审核失败', '已结束'],
            activityData: [], // 我的活动数据
            current: 0, // 当前选中的tab
            dataLoaded: false, // 加载完成状态
            entranceUserList: [], // 入场成员列表
            signupUserList: [], // 报名成员列表
            currentTab: 0, // 当前选中的tab
        }
    },
    computed: {
        filteredActivityData() {
            return this.activityData.filter(item => {
                if (this.current === 0) return true;
                if (this.current === 1) return item.start_time < Date.now() && item.end_time > Date.now();
                if (this.current === 2) return item.signup_start_time < Date.now() && item.signup_end_time >
                    Date.now();
                if (this.current === 3) return item.audit_status === 0;
                if (this.current === 4) return item.audit_status === 2;
                if (this.current === 5) return item.end_time < Date.now();
                return true;
            });
        },
        userInfo() {
            console.log(uni.getStorageSync('userInfo'), 'storestorestorestore====================?');
            return uni.getStorageSync('userInfo') //用户信息
        },
    },
    onLoad() {
        this.getMyActivityData();
    },
    methods: {
        callUser(mobile) {
            if (!mobile) {
                this.$Toast('该用户没有留下联系方式');
                return;
            }
            uni.makePhoneCall({
                phoneNumber: mobile
            })
        },
        btnClick() {
            this.$refs.publishpopup.open('bottom')
        },
        async navToPublish(path) {
            console.log(this.userInfo);
            // 如果未登录或登录过期，跳转到登录页
            if (!this.userInfo.id ) {
                this.$NavigateTo('/qmy_user/login')
                return
            }
            if (this.userInfo?.role?.includes('organizer')) {
                this.$NavigateTo(path)
                return
            }
            // 先更新用户信息，看用户是否是组织者
            await mutations.updateUserInfo()
            if (this.userInfo?.role?.includes('organizer')) {
                this.$NavigateTo(path)
            } else {
                this.$Toast(path == '/pages/publish/notice' ? '您还没有发布活动，不能发送通知哦' : '您还没有权限发布活动，快去认证吧')
            }
        },
        async getMyActivityData() {
            try {
                this.dataLoaded = false;
                let res = await this.$Route('get-private-data', true).getMyActivityData()
                this.activityData = res.data || [];
                this.dataLoaded = true;
            } catch (error) {
                let {
                    code,
                    msg
                } = this.$parseError(err); // 调用公共解析方法
                this.$Toast(msg);
                setTimeout(() => {
                    if (code === 401) this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
                }, 1000);
                this.dataLoaded = true;
            } finally {
                this.dataLoaded = true;
            }
        },
        editActivity(id) {
            let that = this;
            uni.navigateTo({
                url: `/pages/publish/activity?id=${id}`,
                events: {
                    refreshData: () => {
                        that.getMyActivityData();
                    }
                }
            })
        },
        scanCheck(id) {
            uni.scanCode({
                success: (res) => {
                    this.$Route('update-private-data').checkTicket(id, res.result).then((res) => {
                        this.$Toast('门票核销成功');
                    }).catch((err) => {
                        console.error('遇到错误:', err); // 打印错误信息
                        let {
                            code,
                            msg
                        } = this.$parseError(err); // 调用公共解析方法
                        this.$Toast(msg);
                        setTimeout(() => {
                            if (code === 401) {
                                this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
                            }
                        }, 1000);
                    })
                }
            })
        },
        // 查询已入场成员
        getEnterMember(id) {
            this.$Route('get-private-data').getEnterMember(id).then((res) => {
                this.signupUserList = res.data.signupUsers;
                this.entranceUserList = res.data.entranceUsers;
                this.currentTab = 0; // 默认显示报名用户
                this.$refs.entrancePopup.open();
            }).catch((err) => {
                console.error('遇到错误:', err);
                let {
                    code,
                    msg
                } = this.$parseError(err);
                this.$Toast(msg);
                setTimeout(() => {
                    if (code === 401) {
                        this.$NavigateTo('/qmy_user/login');
                    }
                }, 1000);
            })
        }
    }
}
</script>

<style lang="scss">
.img-50 {
    width: 50rpx;
    height: 50rpx;
    border: 4rpx solid #ffffff;
}

.img-190 {
    width: 190rpx;
    height: 190rpx;
}

.text-tips {
    padding: 5rpx 10rpx;
    font-size: 24rpx;
    border-radius: 10rpx;
    color: #ffffff;
    font-size: 20rpx;
    margin-right: 10rpx;
}

.publish-rectangle {
    position: relative;
    width: 100%;
    background-color: white;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    padding-bottom: 20rpx;
    bottom: -20rpx;
    z-index: 2;
}

.publish-rectangle::before {
    content: '';
    position: absolute;
    top: -95rpx;
    z-index: -1;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: white;
    transform: skewY(3deg);
    border-radius: 40rpx 40rpx 0 0;
}

.slanted-rectangle {
    position: relative;
    width: 100%;
    background-color: white;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    padding-bottom: 20rpx;
    bottom: -20rpx;
    z-index: 2;
}

.slanted-rectangle::before {
    content: '';
    position: absolute;
    top: -55rpx;
    z-index: -1;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: white;
    transform: skewY(3deg);
    border-radius: 40rpx 40rpx 0 0;
}

.padding-50 {
    padding: 50rpx;
}

.full-height {
    height: 100%;
}

.box-1 {
    background: #cae8ff;
    border-radius: 20rpx;
    position: relative;
    padding: 45rpx 35rpx;
    width: 48%;
    height: 190rpx;
    z-index: 4;
}

.image-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 170rpx;
    height: 170rpx;
    z-index: 4;
}

.box-2 {
    background: #f2fa91;
    border-radius: 20rpx;
    position: relative;
    padding: 45rpx 35rpx;
    width: 48%;
    height: 190rpx;
    z-index: 4;
}

.image-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 135rpx;
    height: 170rpx;
    z-index: 4;
}

.box-3 {
    background: #a9f5c3;
    border-radius: 20rpx;
    position: relative;
    padding: 45rpx 35rpx;
    width: 100%;
    height: 190rpx;
    margin-top: 30rpx;
    z-index: 4;
}

.image-3 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 220rpx;
    height: 220rpx;
    z-index: 4;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-top: 30rpx;
    padding-bottom: 30rpx !important;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)) !important;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom)) !important;
    z-index: 9999;
    transition: background-color 0.2s ease;
}

.fixed-bottom:active {
    background-color: #11b051 !important;
    /* 点击时背景颜色变化 */
}

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12rpx 24rpx;
    background: linear-gradient(to right, #00ba31, #14cc60);
    border-radius: 30rpx;
    color: #ffffff;
    font-size: 26rpx;
    transition: all 0.3s ease;

    &:active {
        transform: scale(0.95);
        opacity: 0.9;
    }

    .ic-dianhua {
        font-size: 24rpx;
    }
}
</style>
